<template>
  <div class="all">
    <table id="table">
      <tr>
        <td align="right"><span>活动分类:</span></td>
        <td>
          <el-select v-model="activitiesTheme" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </td>
      </tr>
      <tr>
        <td align="right">活动标题:</td>
        <td><el-input v-model="title" placeholder="请输入标题" /></td>
      </tr>
      <tr>
        <td align="right">日期:</td>
        <td>
          <el-date-picker
            v-model="value3"
            type="datetime"
            placeholder="选择日期时间"
            default-time="12:00:00"
          />
        </td>
      </tr>
      <tr>
        <td align="right">积分:</td>
        <td>
          <el-switch
            style="min-height: 36px"
            v-model="pointFlag"
            active-color="#13ce66"
          >
          </el-switch>
          <el-input-number
            v-if="pointFlag"
            v-model="point"
            :min="1"
            :max="10"
            label="描述文字"
            style="margin-left: 25px"
          ></el-input-number>
        </td>
      </tr>
      <tr>
        <td align="right">内容:</td>
        <td>
          <div id="editor">
            <!-- <quill-editor
              v-model="content"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @ready="onEditorReady($event)"
            /> -->
            <tinymce
              v-model="content"
              :setup="setup"
              :setting="setting"
              :height="300"
            />
          </div>
        </td>
      </tr>
      <tr>
        <td />
        <td><el-button type="primary">提交</el-button></td>
      </tr>
    </table>
  </div>
</template>
<script>
import Tinymce from "@/components/Tinymce";

export default {
  components: { Tinymce },
  data() {
    return {
      options: [
        {
          value: 1,
          label: "儿童发布",
        },
        {
          value: 2,
          label: "社区关爱",
        },
        {
          value: 3,
          label: "家属求助",
        },
        {
          value: 4,
          label: "夕阳论坛",
        },
      ],
      // editorOption: {
      //   placeholder: '请输入内容',
      //   modules: {
      //     toolbar: toolbarOptions // 工具栏设置
      //   }
      // },
      title: "",
      activitiesTheme: "",
      pointFlag: undefined,
      point: undefined,
      moneyFlag: undefined,
      money: undefined,
      content: "",
    };
  },
};
</script>

<style>
.all {
  width: 80%;
  margin: 45px auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
#table {
  width: 100%;
  padding: 30px 45px;
  color: #6d7e8d;
}

#table tr td {
  padding: 5px 0 5px 15px;
  vertical-align: top;
}
#table tr td:first-child {
  padding-top: 12px;
}
#table tr td:last-child {
  padding-right: 15px;
}
</style>
